<template>
  <div v-show="route.meta.requiresAuth">
    <h1>pinia:{{ counterStore.count }}</h1>
    <h1>pinia-getters:{{ counterStore.doubleCount }}</h1>
    <h2>{{ userStore.user.name }}-{{ userStore.user.age }}</h2>
    <h2>{{ userStore.computedAge }}</h2>
    <button @click="counterStore.increment()">修改count</button>
    <button @click="userStore.changeUser()">修改user</button>
    <!-- 在app.vue根组件中写的结构，在任意个页面组件都会显示 -->
    <!-- 取出路由的元信息 -->
    <h1>{{ route.meta.title }}</h1>
    <h3>{{ route.meta.requiresAuth }}</h3>

    <!-- 路由跳转的方法 -->
    <!-- 路由组件标签跳转 -->
    <!-- 路由组件标签跳转 to属性可以指定路径path或name名称跳转 -->
    <router-link :to="{ path: '/', query: { id: 1 } }">首页</router-link> |
    <!-- to=/?id=1静态数据传递 -->
    <!-- 动态绑定数据传参，通过query和state分别传递 -->
    <router-link :to="{ name: 'about', state: { id: 2 } }">关于</router-link> |
    <!-- App.vue是根组件 -->
    <router-link to="my">我的</router-link> |
    <router-link to="method">方法</router-link> |
    <router-link to="/page">卧龙控股</router-link>
    <!-- 事件绑定进行路由跳转 -->
    <button @click="toHome">跳转首页</button>
    <button @click="toAbout">跳转关于</button>
    <!-- 调用全局注册的头部组件 -->
    <HeaderCom />
  </div>

  <!-- 路由视图页面组件的站位 -每一个views中的页面由它占位 没他页面效果显示不出来-->
  <RouterView />

  <!-- 调用底部组件 -->
  <FooterCom v-show="route.meta.requiresAuth"/>
</template>

<script lang="ts" setup>
//导入路由包中的方法
import { useRouter, useRoute } from "vue-router";
import FooterCom from "./components/FooterCom.vue";

//引入pinia定义的仓库对象
import { useCounterStore } from "./stores/counter";
import {useUserStore} from './stores/user'
//调用仓库对象方法
const counterStore =useCounterStore()
const userStore=useUserStore()
//调用路由方法
const router = useRouter();
//调用路由配置
const route = useRoute();

function toHome() {
  // router.push('/')
  router.push({ path: "/", query: { id: 3 } }); //json字符串写法
  //query：传递数据时参数会显示在浏览器的url地址栏上，数据类型默认会转为字符串
}
function toAbout() {
  // router.push('about')
  router.push({ name: "about", state: { id: 4 } });
  //state：传递数据时参数不会显示在浏览器的url地址栏上，数据烈性不会改变
}
//总结：一般我们传递普通数据用query，加密数据用state
//query相对安全，state相对安全
</script>
<style lang="less">
button {
  background-color: aqua;
  color: red;
}
</style>
